<template>
	<el-dialog v-model="dialogVisible" :title="isAdd ? '添加运费模板' : '编辑运费模板'" width="45%" :before-close="handleClose">
		<div style="font-size: 14px; line-height: 30px">
			<el-form :model="form" label-width="100px" :rules="rules" ref="formRef">
				<el-form-item label="模板名称：" prop="name">
					<el-input v-model="form.name" placeholder="请输入模板名称" style="min-width: 300px"></el-input>
				</el-form-item>

				<el-form-item label="基础运费：" prop="baseFreight">
					<el-input v-model="form.baseFreight" placeholder="请输入基础运费" style="min-width: 300px"></el-input>
				</el-form-item>
				<el-form-item label="特殊地区：">
					<el-cascader
						style="width: 100%"
						ref="cascaderRef"
						v-model="form.cityList"
						:options="state.options"
						:props="state.cityProp"
						:collapse-tags="true"
						:collapse-tags-tooltip="true"
						@change="selectCity"
					/>
				</el-form-item>

				<!-- <el-form-item label="附加运费：" prop="additionalFreight" v-if="form.cityList && form.cityList.length > 0">
					<el-input v-model="form.additionalFreight" placeholder="请输入附加运费" style="min-width: 300px"></el-input>
				</el-form-item> -->

				<el-form-item label="排序" prop="weight">
					<el-input v-model="form.weight" placeholder="请输入排序" style="min-width: 300px"></el-input>
				</el-form-item>
			</el-form>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="submit">提交</el-button>
				<el-button @click="handleClose">关闭</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref, watch, reactive, onMounted } from 'vue';
import { cityList, freightAddOrEdit } from '/@/api/api';

const form = ref({});
const formRef = ref();
const loading = ref(false);
const props = defineProps({
	// 列表内容
	dialogVisible: {
		type: Boolean,
		default: () => false,
	},
	row: {
		type: Object,
		default: () => {},
	},
	isAdd: {
		type: Boolean,
		default: () => true,
	},
});
const cascaderRef = ref();
const dialogVisible = ref(false);

const state = reactive({
	value: '',
	options: [],
	cityProp: {
		label: 'name',
		value: 'id',
		children: 'childList',
		multiple: true,
	},
});

const rules = reactive({
	name: [{ required: true, message: '请填写模板名称', trigger: 'blur' }],
	baseFreight: [{ required: true, message: '请填写基础运费', trigger: 'blur' }],
	additionalFreight: [{ required: true, message: '请填写特殊地区附加运费', trigger: 'blur' }],
	weight: [{ required: true, message: '请填写模板排序', trigger: 'blur' }],
});

watch(
	() => props.dialogVisible,
	(val) => {
		dialogVisible.value = val;
		if (val) {
			form.value = JSON.parse(JSON.stringify(props.row));
			getCityList();
		}
	}
);

const getCityList = async () => {
	const { code, data } = await cityList();
	if (code === 200) {
		state.options = data.list;
	}
};

// 获取选择节点的数据
const selectCity = (value) => {
	if (cascaderRef.value) {
		form.value.cityList = cascaderRef.value
			.getCheckedNodes()
			.map((ele) => {
				if (ele.data.type === 1) {
					return ele.data.id;
				}
			})
			.filter((item) => {
				return item !== undefined;
			});
	}
};

function submit() {
	if (formRef.value) {
		formRef.value.validate(async (vaild) => {
			if (vaild) {
				let par = {
					...form.value,
					// 如果选择了特殊区域的话，就使用输入的附加运费，然后没有选择特殊地区，则默认为0
					additionalFreight: form.value.cityList && form.value.cityList.length > 0 ? form.value.additionalFreight : '0',
				};
				let { code } = await freightAddOrEdit(par);

				if (code === 200) {
					ElMessage.success('操作成功');
					handleClose();
				}
			}
		});
	}
}

const emit = defineEmits(['handleClose']);

function handleClose() {
	form.value = {};
	emit('handleClose');
}
</script>

<style>
.desc_label {
	width: 20px;
}

.el-tree-node__content {
	height: 40px;
}

.select_all {
	display: flex;
	align-items: center;
	position: absolute;
	top: 0;
	right: 30px;
	cursor: pointer;
}
</style>
